<template>
	<view class="shop-box bg-color2" @click="goDetails">
		<view class="top-box flex">
			<!-- 店名 -->
			<view>
				<text selectable class="title">{{ storeName }}</text>
			</view>
		</view>
		<!-- 位置 -->
		<view class="row2">
			<text selectable class="location">{{ location }}</text>
		</view>
		<view class="row3 flex-row-between-center">
			<!-- 手机号 -->
			<view @click="callPhone(phone)">
				<fui-icon name="telephone" size="40"></fui-icon>
				<view>电话</view>
			</view>
			<view class="rate">
				<fui-icon name="star-fill" size="30" color="#aa0000"></fui-icon>
				{{ storeDetailInfo.overall_rating || '暂无评分' }}
			</view>
			<view class="nav-button" @click="goStore">
				<fui-icon name="arrowright" size="40"></fui-icon>
				<view>导航</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getStoreLocation } from '@/request/modules/desk.js';
import { onMounted, ref } from 'vue';
import { showMsg } from '../../utils/interact';

// 响应式变量
const storeDetailInfo = ref({});

//非响应式变量
let lng = 0;
let lat = 0;
let addr = '';
// 接收父组件传值
const props = defineProps({
	storeName: {
		type: String,
		required: true
	},
	location: {
		type: String,
		required: true
	},
	phone: {
		type: String,
		default: ''
	},
	uid: {
		type: String,
		required: true
	}
});

// 事件回调

//点击导航打开手机安装的地图应用
const goStore = () => {
	// #ifdef APP-PLUS
	if (!lng || !lat || !addr) return;

	let platform = uni.getSystemInfoSync().osName;
	const _mapName = [
		{
			title: '高德地图',
			name: 'amap',
			androidName: 'com.autonavi.minimap',
			iosName: 'iosamap://'
		},
		{
			title: '百度地图',
			name: 'baidumap',
			androidName: 'com.baidu.BaiduMap',
			iosName: 'baidumap://'
		},
		{
			title: '谷歌地图',
			name: 'googlemap',
			androidName: 'com.google.android.apps.maps',
			iosName: 'comgooglemaps://'
		},
		{
			title: '苹果地图',
			name: 'applemap',
			androidName: 'com.apple.Maps',
			iosName: 'maps://'
		}
	];

	const buttons = [];

	//根据用户安装的应用，生成选择按钮组
	if (platform === 'android') {
		_mapName.forEach((item) => {
			if (
				plus.runtime.isApplicationExist({
					pname: item.androidName
				})
			) {
				buttons.push(item);
			}
		});
	} else if (platform === 'ios') {
		_mapName.forEach((item) => {
			if (
				plus.runtime.isApplicationExist({
					action: item.iosName
				})
			) {
				buttons.push(item);
			}
		});
	}

	if (buttons.length) {
		//显示选择按钮框
		plus.nativeUI.actionSheet(
			{
				title: '选择地图应用',
				cancel: '取消',
				buttons
			}, //点击事件
			(e) => {
				let { index } = e;
				if (index > 0) {
					openMapApp(buttons[index - 1], platform);
				}
			}
		);
	} else {
		showMsg('未安装地图应用');
	}

	//打开选择的地图应用
	function openMapApp(_map, os) {
		const _urlNeeded = {
			android: {
				amap: `amapuri://route/plan/?sid=&did=&dlat=${lat}&dlon=${lng}&dname=${addr}&dev=0&t=0`,
				baidumap: `baidumap://map/direction?origin=${lat},${lng}&destination=name:${addr}|latlng:${lat},${lng}&coord_type=wgs84&mode=driving&src=andr.baidu.openAPIdemo"`,
				googlemap: `geo: + ${lat} + ',' + ${lng} + '?q=' + encodeURIComponent(${addr})`
			},
			ios: {
				amap: `iosamap://path?sourceApplication=fuxishan_uni_client&dlat=${lat}&dlon=${lng}&dname=${addr}&dev=0&t=0`,
				baidumap: `baidumap://map/direction?origin=${lat},${lng}&destination=name:${addr}|latlng:${lat},${lng}&mode=driving&src=ios.baidu.openAPIdemo`,
				googlemap: `comgooglemaps://?q=${addr}`,
				applemap: `maps://?q=${addr}&sll=${lat}+ ',' + ${lng}&z=10&t=s`
			}
		};
		let openUrl = _urlNeeded[os][_map.name];
		//跳转地图应用
		plus.runtime.openURL(encodeURI(openUrl));
	}
	// #endif
};

// 点击电话的回调
function callPhone(phone) {
	if (!phone) return showMsg('暂无电话');
	//处理电话字符串
	const buttons = [];
	if (/\,/.exec(phone)) {
		let [fixedPhone, telephone] = phone.split(',');
		buttons.push({
			title: telephone
		});
		fixedPhone = fixedPhone.replace(/[\(\)]/g, '');
		fixedPhone = fixedPhone.slice(0, 4) + '-' + fixedPhone.slice(4);
		buttons.push({
			title: fixedPhone
		});
		// #ifdef APP-PLUS
		//显示选择按钮框
		plus.nativeUI.actionSheet(
			{
				title: '拨打电话',
				cancel: '取消',
				buttons
			},
			(e) => {
				if (e.index > 0) {
					call(buttons[e.index - 1].title);
				}
			}
		);
	} else {
		call(phone);
	}

	function call(phone) {
		plus.device.dial(phone, true);
	}
	// #endif
}

// 生命周期函数
onMounted(() => {
	getDeskDetailInfo();
});

// 请求接口
// 获取店铺详情
const getDeskDetailInfo = async () => {
	const res = await getStoreLocation({ uid: props.uid });
	if (res.statusCode !== 200) return showMsg('请求失败');
	const {
		result: { location, address, detail_info }
	} = res.data;
	lng = location.lng;
	lat = location.lat;
	addr = address;
	storeDetailInfo.value = detail_info;
};
</script>

<style scoped lang="scss">
.shop-box {
	margin: 10px;
	border-radius: 10rpx;
	padding: 10px;
	// 店名
	.top-box {
	}
	// 位置
	.row2 {
		display: flex;
		margin: 20rpx 0;
		.location {
			color: $uni-text-color-address;
			font-size: $uni-font-size-base;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.row3 {
		font-size: $uni-fs-icon-text;

		.rate {
			font-size: $uni-font-size-base;
		}
	}
}
</style>